<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>收集表单数据</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        若是: <input type="text" /> 则v-model收集的是value值
        若是: <input type="radio" /> 则v-model收集的是value值
        若是: <input type="checkbox" /> 且没有配置input的value属性,
        那么收集的是checked(勾选or 未勾选 是布尔值)
        如果配置了checkbox的value,
        并且data中的hobby里配置的类型数组 才能收集到
     -->
   <div id="root">
       <form @submit.prevent="submit">
           <!-- <label for="account">账号</label>
           <input type="text" id="account"> -->
           账号: <input type="text" v-model="userInfo.account"><br><br>
           密码: <input type="text" v-model="userInfo.password"><br><br>
           性别: 男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
                 女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br><br>
            爱好: 抽烟<input type="checkbox" v-model="userInfo.hobby" value="smoke">
                  喝酒<input type="checkbox" v-model="userInfo.hobby" value="drink">
                  开车<input type="checkbox" v-model="userInfo.hobby" value="drive">
            <br><br>
            所属校区: <select v-model="userInfo.city">
                        <option value="">请选择校区</option>
                        <option value="beijing">北京</option>
                        <option value="shanghai">上海</option>
                        <option value="shenzhen">深圳</option>
                        <option value="wuhan">武汉</option>
                      </select>
            <br><br>
            其他信息: <textarea v-model="userInfo.other" cols="30" rows="10"></textarea>
            <br><br>
            <input v-model="userInfo.agree" type="checkbox">阅读并接受<a href="https://www.cctalk.com/m/group/336666">《用户协议》</a>
            <br><br>
            <button>提交</button>
       </form>
   </div> 

   <script>
       new Vue({
           el: '#root',
           data: {
              userInfo: {
                account: '',
                password: '',
                sex: '',
                hobby: [],
                city: 'beijing',
                other: '',
                agree: false
              }
           },
           methods: {
               submit(){
                console.log(this.userInfo);
               }
           }
       })
   </script>
</body>
</html>